<!doctype html>
<html>
<head>
    <title>11111111111</title>
    <link rel="stylesheet" href="xterm/dist/xterm.css" />
    <script src="xterm/dist/xterm.js"></script>
    <script src="xterm/dist/addons/attach/attach.js"></script>
    <script src="xterm/dist/addons/fit/fit.js"></script>
    <style>
        body {font-family: Arial, Helvetica, sans-serif;}

        input[type=text], input[type=password], input[type=number] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        button {
            background-color: #000;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            opacity: 0.8;
        }

        .serverbox {
            padding: 16px;
            border: 1px solid #f1f1f1;
            width: 90%;
            position: absolute;
            top: 3%;
            left: 5%;
        }
    </style>
</head>
<body style="padding: 0px!important; margin: 0px!important;">
<div id="serverbox" class="serverbox">
    <label for="psw"><b>ssh地址</b></label><br>
    <input type="text" id="server" name="server" title="server" placeholder="server" value="127.0.0.1" /><br>
    <label for="psw"><b>ssh端口</b></label><br>
    <input type="number" min="1" id="port" name="port" title="port" placeholder="port" value="22" /><br>
    <label for="psw"><b>ssh账号</b></label><br>
    <input type="text" id="user" name="user" title="user" placeholder="user" value="root" /><br>
    <label for="psw"><b>ssh密码</b></label><br>
    <input type="text" id="password" name="password" title="password" placeholder="password" value="123456" /><br>
    <button type="button" onclick="ConnectServer()">登录到终端</button><br>
</div>
<div id="terminal" style="width:100%; height:90vh;visibility:hidden"></div>
<script>
    function fd() {
        var url = window.document.location.href.toString(); //当前完整url
        var u = url.split("?"); //以？为分隔符把url转换成字符串数组
        if (typeof(u[1]) == "string") {
            u = u[1].split("&"); //同上
            var get = {};
            for (var i in u) {
                var j = u[i].split("="); //同上
                if(j[0] == 'fd') return j[1];
            }
        }
        throw 'url上必须携带fd参数';
    }

    function getcookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) {
            return unescape(arr[2]);
        } else {
            return null;
        }
    }

    window.toFd = fd();

    var resizeInterval;
    var wSocket = new WebSocket("ws:"+window.location.host+"/v1/terminal.index/"+window.toFd+"?_token="+getcookie("token"));
    //var wSocket = new WebSocket("ws:127.0.0.1:8090");
    Terminal.applyAddon(attach);  // Apply the `attach` addon
    Terminal.applyAddon(fit);  //Apply the `fit` addon
    var term = new Terminal({
        cols: 80,
        rows: 24
    });
    term.open(document.getElementById('terminal'));


    function ConnectServer(){
        document.getElementById("serverbox").style.visibility="hidden";
        document.getElementById("terminal").style.visibility="visible";

        var dataSend = {
            "uri" : '/v1/terminal.auth'+'/'+window.toFd,
            "header" : {},
            "body": {
                'server' : document.getElementById("server").value,
                "port":document.getElementById("port").value,
                "user":document.getElementById("user").value,
                "password":document.getElementById("password").value
            }
        };
        wSocket.send(JSON.stringify(dataSend));

        term.fit();
        term.focus();
    }

    wSocket.onopen = function (event) {
        console.log("onopen", event.data);
        console.log("Socket Open");
        term.attach(wSocket,false,false);
        window.setInterval(function(){
            var dataSend = {
                "uri" : '/v1/terminal.refresh'+'/'+window.toFd,
                "header" : {},
                "body": {}
            };
            wSocket.send(JSON.stringify(dataSend));
        }, 500);
    };

    wSocket.onerror = function (event){
        term.detach(wSocket);
        alert("Connection Closed");
    }

    term.on('data', function (data) {
        var dataSend = {
            "uri" : '/v1/terminal.command'+'/'+window.toFd,
            "header" : {},
            "body": {
                "command" : data
            }
        };
        wSocket.send(JSON.stringify(dataSend));
        //Xtermjs with attach dont print zero, so i force. Need to fix it :(
        if (data=="0"){
            term.write(data);
        }
    })

    //Execute resize with a timeout
    window.onresize = function() {
        clearTimeout(resizeInterval);
        resizeInterval = setTimeout(resize, 400);
    }
    // Recalculates the terminal Columns / Rows and sends new size to SSH server + xtermjs
    function resize() {
        if (term) {
            term.fit()
        }
    }
</script>
</body>
</html>
